import React from 'react'
import {Input, Checkbox, Tag, Form, Button, Table, Icon, Tooltip} from 'antd'
import roles from '../../../constant/roles'
import { FormattedMessage } from 'react-intl'
import { convertContent } from '../../../constant/lang-util'

const { TextArea } = Input
const FormItem = Form.Item
export const UserAssignRolesBox = ({usernameOrEmails, usersRole, handleSearchClick, handleUsernameOrEmailChange, handleRoleChange, handleRefreshClick}) => {
  const columns = [{
    title: 'ID',
    dataIndex: 'id'
  }, {
    title: <FormattedMessage id='用户名' />,
    dataIndex: 'username'
  }, {
    title: <FormattedMessage id='邮箱' />,
    dataIndex: 'email'
  }, {
    title: <FormattedMessage id='角色' />,
    dataIndex: 'roles',
    render: (text, record) => {
      return roles.map((item, index) => <span key={index}>
        <Checkbox onChange={handleRoleChange} value={record.id + ',' + item.number} checked={text.includes(item.number)}>
          <Tag>{convertContent(item.value)}</Tag>
        </Checkbox>
      </span>)
    }
  }]

  return <div>
    <FormItem label={<FormattedMessage id='username 或者 email,每行写一个' />}>
      <TextArea
        autosize={{ minRows: 2, maxRows: 10 }}
        value={usernameOrEmails}
        onChange={handleUsernameOrEmailChange}
            />
      <Button
        type='primary'
        onClick={handleSearchClick}>
        <FormattedMessage id='查询' />
      </Button>
      <Tooltip title={<FormattedMessage id='全查' />}>
        <Icon className='role-refresh-btn'
          onClick={handleRefreshClick}
          type='sync' />
      </Tooltip>
      <Table columns={columns} dataSource={usersRole} size='middle' pagination={false} />
    </FormItem>
  </div>
}

export default UserAssignRolesBox
